<template>
  <div class="resume">
    <div class="box-item">
      <p class="resume-name">张谢霞</p>
      <div class="brief-line">
        <div class="brief-title">求职意向:</div>
        <div class="brief-text">前端开发工程师</div>
      </div>
      <div class="brief-line">
        <div class="brief-title">联系方式:</div>
        <div class="brief-text">152-0812-1455</div>
      </div>
      <div class="brief-line">
        <div class="brief-title">邮箱:</div>
        <div class="brief-text">snowfee@163.com</div>
      </div>
    </div>
    <div class="box-item">
      <p class="item-title">Strengths</p>
      <ul class="item-text">
        <li>Experienced in HTML, CSS, JavaScript and Ajax.</li>
        <li>Experienced in Vue, Vuex, Axios and jQuery.</li>
        <li>Familiar with webpack, vue-cli, etc. to build font-end automation projects.</li>
        <li>Familiar with git and experienced in GitKraken, a git visualization tool, to manage project versions.</li>
        <li>Familiar with WeChat Mini Program.</li>
        <li>Familiar with Node.js.</li>
      </ul>
    </div>
    <div class="box-item">
      <p class="item-title">Work Experience</p>
      <div class="work-brief">
        <p class="work-brief-time"><b>Front-end development, 2017 to Present</b></p>
        <p class="work-brief-company">iGola Travel Services Consultant Company Ltd</p>
      </div>
      <div class="work-resp">
        <p class="work-resp-title"><b>Responsibilities:</b></p>
        <ul>
          <li>Involved in requirements analysis, project evaluation.</li>
          <li>Complete page development based on design drawings, self-test, interface debugging, code review, testing, Online.</li>
          <li>Project refactoring, optimization and maintenance.</li>
        </ul>
      </div>
    </div>
    <div class="box-item">
      <p class="item-title">Project Experience</p>
      <div class="project-item">
        <div class="project-brief">
          <p class="project-brief-time"><b>Hotel APP/PC/mobile Project, 2018 to Present</b></p>
          <p class="project-brief-job">Front-end development</p>
        </div>
        <div class="project-des">
          <ul>
            <li>Use the Weex as main mobile development framework, and the Vue as main PC development framework.</li>
            <li>Responsible for booking page development and maintenance, including contact selection page, coupon selection page, etc.</li>
            <li>Completed the development of pop-up component, form component.</li>
            <li>Handle compatibility between IOS and Android.</li>
          </ul>
        </div>
      </div>
      <div class="project-item">
        <div class="project-brief">
          <p class="project-brief-time"><b>oms, 2017 to Present</b></p>
          <p class="project-brief-job">Front-end development</p>
        </div>
        <div class="project-des">
          <ul>
            <li>A background management system, use MetraAdmin as UI framework, with jQuery, Bootstrap.</li>
            <li>Responsible for the front end of the whole background system, including hotel/flight order management, coupon system, etc.</li>
            <li>Completed a set of ui frameworks for order management pages.</li>
          </ul>
        </div>
      </div>
      <div class="project-item">
        <div class="project-brief">
          <p class="project-brief-time"><b>The prediction of Chinese pig year, 2019/1/14 to 2019/1/31</b></p>
          <p class="project-brief-job">WeChat Mini Program development</p>
        </div>
        <div class="project-des">
          <ul>
            <li>An experimental applet developed independently using the cloud development function of the WeChat applet.</li>
            <li>Experienced in animation, share, creating canvas of the WeChat applet.</li>
            <li>Experienced in JSON database, cloud function of the WeChat applet.</li>
          </ul>
        </div>
      </div>
      <div class="project-item">
        <div class="project-brief">
          <p class="project-brief-time"><b>Email H5 Project, 2018/10 to 2018/11</b></p>
          <p class="project-brief-job">Font-end development</p>
        </div>
        <div class="project-des">
          <ul>
            <li>Embed airline tickets and hotel mail into app for users to save and view.</li>
            <li>Using flexible.js to realize mobile adaptation, and Vue as main development framework.</li>
            <li>Complete the development of the page and debug with native app.</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="box-item">
        <p class="item-title">Education</p>
        <div class="education-item">
          <p><b>Sichuan University</b></p>
          <p><b>Bachelor of Science, Computer Science</b></p>
          <p>2013-2017</p>
        </div>
    </div>
    <div class="box-item">
        <p class="item-title">Self-assessment</p>
        <div class="education-item">
          <ul>
            <li>Easy-going and quickly integrate into a team.</li>
            <li>Fast learner.</li>
            <li>Interested in page layout and UI interaction.</li>
          </ul>
        </div>
    </div>
    <input type="text" v-model="a.b" @blur="inputChange()"/>
  </div>
</template>
<script>
  export default{
    data() {
      return {
        a: {
          a: 'a',
          b: ''
        }
      }
    },
    created() {
       this.$set(this.a, 'b', 'aaa')
    },
    methods: {
      inputChange() {
        console.log('ok')
        console.log(this.a)
        this.$set(this.a, 'b', 'bb')
      }
    }
  }
</script>
<style scoped>
  p{
    margin: 0;
  }
  ul{
    margin-top: 0px;
  }
  .resume {
    width: 720px;
    height: 100%;
    padding: 30px 10px;
    margin: auto;
    font-family: Arial, Helvetica, "Microsoft Yahei", "微软雅黑", sans-serif;
    font-size: 16px;
    line-height: 1.5;
  }
  .box-item{
    border-bottom: 1px solid #d2d2d2;
    padding: 10px 0;
  }
  .resume-name{
    font-size: 20px;
    /* font-weight: bold; */
    padding-bottom: 9px;
  }
  .brief-line{
    display: flex;
    flex-direction: row;
    padding-bottom: 5px;
  }
  .brief-title{
    /* font-weight: bold; */
    width: 150px;
  }
  .brief-text{
    width: 300px;
  }
  .item-title{
    font-family: Arial, Helvetica, "Microsoft Yahei", "微软雅黑", sans-serif;
    font-size: 24px;
    padding-bottom: 20px;
    font-weight: 300;
  }
  .item-text{
    font-weight: 400;
  }
  .work-brief{
    padding-bottom: 15px;
  }
  .project-item{
    margin-bottom: 20px;
  }
</style>
